<template>
  <Card>
    <p slot="title">
      <Icon type="android-document"></Icon>
      文章管理
    </p>

    <div class="body">
      <h5 style="color: #2d8cf0">条件排序</h5>
      <br/>
      <div>
        <label>类别:</label>
        <Select style="width:200px" filterable @on-change="rootListChange">
          <Option v-for="item in rootList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>

        <label style="margin-left: 50px">关键字:</label>
        <Input style="width: 150px;margin-left: 6px;" icon="search" type="text" v-model="searchInput"
               placeholder="关键字查询..." clearable/>
        <Button type="ghost" @click="searchClick">查询</Button>

        <Button type="ghost" @click="cancelTopAll" style="margin-left: 10px">取消所有置顶</Button>
      </div>
      <br/>
      <Table :loading="loading" stripe :columns="columns" :data="data"></Table>

      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :page-size="pageConfig.size" :total="pageConfig.max" :current="pageConfig.currentPage"
                @on-change="changePage"></Page>
        </div>
      </div>

    </div>
  </Card>
</template>

<script>
  export default {
    name: "ArticleManage",
    data() {
      return {
        searchInput: '',
        loading: false,
        rootList: [
          {label: "全部", value: -100}
        ],
        columns: [
          {
            title: '标题',
            key: 'title'
          },
          {
            title: '发布时间',
            key: 'createTime',
            sortable: true
          },
          {
            title: '评论数',
            key: 'commentCount',
            sortable: true
          },
          {
            title: '类别',
            key: 'sortName'
          },

          {
            title: '阅读量',
            key: 'readCount',
            sortable: true
          },
          {
            title: '置顶',
            key: 'top',
            sortable: true
          },
          {
            title: '操作',
            key: 'action',
            render: (h, params) => {
              return h('Dropdown', {
                on: {
                  'on-click': this.actionClick
                },
                props: {
                  trigger: 'click'
                }
              }, [
                h('Button', {
                  props: {
                    type: "primary"
                  }
                }, [
                  '操作',
                  h('Icon', {
                    props: {
                      type: "arrow-down-b"
                    },
                    style: {
                      marginLeft: '5px'
                    }
                  })
                ]),
                h('DropdownMenu', {
                  slot: "list"
                }, [
                  h('DropdownItem', {props: {name: 0 + "-" + params.index}}, "删除"),
                  h('DropdownItem', {props: {name: 1 + "-" + params.index}}, "更新"),
                  h('DropdownItem', {props: {name: 2 + "-" + params.index}}, "置顶"),
                  h('DropdownItem', {props: {name: 3 + "-" + params.index}}, "查看")
                ])
              ])
            }
          }
        ],
        data: [],
        pageConfig: {
          size: 6,
          currentPage: 0,
          max: 0,
          url: '/get-article-all',
          key: '',
          sortId: ''
        },
        serverUrl: '' //服务器的Url地址
      }
    },
    mounted() {
      this.$emit('selectMenu', '1-3');
    },
    async created() {
      let {data} = await this.axios.get('static/data.json');
      this.serverUrl = data.serverUrl;

      this.http.get('/get-sort-all', null, data => {
        let list = data.list;
        list.forEach(item => {
          let name = item.sort.name;
          let id = item.sort.id;
          let data = {label: name, value: id};
          this.rootList.push(data);
        })
      });

      this.replaceAll(1, this.pageConfig.key, this.pageConfig.sortId);

    },
    methods: {
      rootListChange(val) { //选择标签的选择事件
        this.pageConfig.key = '';
        if (val < 0) {
          //选择的是全部属性
          this.pageConfig.sortId = '';
        } else {
          this.pageConfig.sortId = val;
        }
        this.replaceAll(1, this.pageConfig.key, this.pageConfig.sortId);
      },
      searchClick() {  //查询的点击事件
        if (this.searchInput.length == 0) {
          this.$Message.warning('是不是忘记了输入?');
        } else {
          this.pageConfig.key = this.searchInput;
          this.replaceAll(1, this.pageConfig.key, this.pageConfig.sortId);
        }
      },
      actionClick(name) {  //操作按钮点击的时间
        let action = parseInt(name.split('-')[0]);
        let index = parseInt(name.split('-')[1]);
        let item = this.data[index];
        let id = item.id;
        console.log("action: " + action + " index: " + id);
        switch (action) {
          case 0://删除
            this.http.get('/del-article', {id: id}, data => {
              this.$Message.success("删除成功");
              this.pageConfig.key = '';
              this.pageConfig.sortId = '';
              this.replaceAll(1, this.pageConfig.key, this.pageConfig.sortId);
            }, error => {
              this.$Message.error(error);
            });
            break;
          case 1://更新
            this.$router.push({name: 'UpdateArticle', params: {id, back: 'ArticleManage'}});
            break;
          case 2://置顶
            this.http.get('/update-article-top', {id: id}, data => {
              this.$Message.success("置顶成功");
              this.pageConfig.key = '';
              this.pageConfig.sortId = '';
              this.replaceAll(1, this.pageConfig.key, this.pageConfig.sortId);
            }, error => {
              this.$Message.error(error);
            });
            break;
          case 3://查看
            window.open(this.serverUrl + id);
            break;
        }
      },
      changePage(page) {   //页码切换
        this.replaceAll(page, this.pageConfig.key, this.pageConfig.sortId);
      },
      replaceAll(page, key, sortId) {  //此方法传入参数即可进行请求
        this.data.length = 0;
        this.loading = true;
        this.http.get(this.pageConfig.url, {
          isSplit: true,
          page: page,
          size: this.pageConfig.size,
          key: key,
          sortId: sortId
        }, data => {
          let list = data.records;
          this.pageConfig.currentPage = data.current;
          this.pageConfig.max = data.total;
          list.forEach(item => {
            let data = {
              title: item.article.title,
              createTime: item.article.createtime,
              commentCount: item.commentCount,
              readCount: item.article.readcount,
              top: item.article.top,
              id: item.article.id,
              sortName: item.article.sortName
            };
            this.data.push(data);
          });
          this.loading = false;
        });
      },
      /**
       * 取消所有的置顶
       */
      cancelTopAll() {
        this.http.get("/article-cancel-all-top", null, success => {
          this.$Message.success("操作成功");
          this.changePage(1);
        }, error => {
          this.$Message.error("操作失败");
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .body
    margin: 10px
</style>
